<template>
  <el-card class="mt15 mb15">
    <!-- 第一行——操作按钮 -->
    <div class="filter-container"><el-button type="primary" icon="el-icon-document-add" @click="importInformationShow">导入专场</el-button></div>
    <!-- / 第一行——操作按钮 -->

    <!-- table表格 -->
    <el-table :data="list" :stripe="true" style="width: 100%">
      <!-- 缩略图
      <el-table-column align="center" label="缩略图" width="200px">
        <template slot-scope="{ row }">
          <el-image    style="width: 100px; height: 50px" :src="row.image_dictText" />
        </template>
      </el-table-column>-->
      <el-table-column align="center" label="专场头图" width="300px">
        <template slot-scope="{ row }">
          <el-image style="display: block;height: 50px" fit="cover" :src="row.image_dictText"/>
        </template>
      </el-table-column>
      <!-- 标题 -->
      <el-table-column align="center" prop="title" label="专场名称">
        <template slot-scope="{ row }">
          {{ row.title ? row.title : '-' }}
        </template>
      </el-table-column>
      <!-- 缩略图 -->


      <!-- 排序 -->
      <el-table-column align="center" prop="sequence" label="排序" width="200px">
        <template slot-scope="{ row }">
          <el-input-number v-model="row.sequence" style="width: 140px;" :min="1" :max="10000" label="排序" @change="handleChange(row)" />
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="{ row, $index }">
          <el-button type="text" @click="delItem(row, $index)">删除</el-button>
          <!-- <el-button type="text" @click="topItem(row)">置顶</el-button> -->
        </template>
      </el-table-column>
      <!-- / 操作 -->
    </el-table>
    <!-- / table表格 -->

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @current-change="currentChange"
      @pagination="getList"
    />
    <!-- / 分页 -->
    <!--    <edit-drawer ref="importInformation" @refresh="refresh" />-->
    <!--   -->
    <import-information ref="importInformation" @refresh="refresh" />
  </el-card>
</template>

<script>
// import { fetchList } from "@/api/article";

import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import importInformation from './components/import-information'
import { blockDataAdd, blockDataDel, blockData_list } from '@/api/block'
export default {
  components: { Pagination, importInformation },

  data() {
    return {
      total: 0,
      channelId: '',
      blockId: '',
      list: [],
      title: '',
      // 新增弹出框
      dialogVisible: false, // 弹出框的显示与隐藏
      listLoading: true,
      listQuery: {
        title: '',
        pageNo: 1,
        pageSize: 10,
        blockId: this.blockId
        // type:"default",
        //  sort: false
      }
    }
  },
  created() {
    const blockId = this.$route.query.id
    this.blockId = blockId
    this.listQuery.blockId = this.blockId
    // this.initBlockId();
    this.getList()
  },
  methods: {
    // initBlockId(){
    //   let blockIds=["index_notice"];
    //   for (let k = 0, length = blockIds.length; k < length; k++) {
    //     let element=blockIds[k];
    //     if(window.location.href.indexOf(element)>0){
    //       console.log("the blockId is:"+element);
    //       this.blockId=element;
    //       this.listQuery.id=element;
    //       return;
    //     }
    //   }
    // },
    // table表格事件
    indexMethod(index) {
      return index * 2
    },
    importInformationShow() {
      // console.log("the blockId is=======>:"+this.blockId);
      this.$refs.importInformation.show(this.blockId, this.channelId)
    },
    // 列表
    getList() {
      this.listLoading = true
      if (this.title != '' && this.title != null) {
        this.listQuery.title = '*' + this.title + '*'
      } else {
        this.listQuery.title = ''
      }
      blockData_list(this.listQuery).then(response => {
        this.list = response.result.records
        // this.total = 1;
        this.total = response.result.total
        this.listLoading = false
      })
    },
    refresh() {
      this.getList()
    },

    handleChange(row) {
      // 排序
      console.log(row.id, row.sequence)
      const blocks = []
      const that = this
      const i = 0

      console.log('您选择的数据：' + row.id + ' ' + row.title)
      const b = {}

      b.id = this.$createBlockDataId(this.blockId, row.sourceId)
      // b.sourceId=row.sourceId;
      // b.open=true;
      // b.type="cms_content";
      // b.title=row.title;
      // b.blockId=that.blockId;
      // b.image=row.thumb;
      b.sequence = row.sequence

      blocks.push(b)

      blockDataAdd(blocks).then(response => {
        this.$message({
          type: 'success',
          message: '更新成功！'
        })
        // this.drawerShow = false

        this.getList()
      })
    },

    // 删除
    delItem(e, index) {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          blockDataDel({ id: e.id }).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.refresh()
          })
          // this.list.splice(index, 1)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    currentChange(e) {
      console.log(e)
    },
    // 弹出框---分页点击事件
    handleSizeChange() {},
    handleCurrentChange() {},

    // ---------------------------

    // 外部分页 -- 搜索
    handleFilter() {}
  }
}
</script>
<style lang="scss" scoped></style>
